@charset "UTF-8";

.app-header{   
    height:601px;
    width:100%;
    background: url(./../images/app/图层-11.png) no-repeat center 0;
    background-size: 1903px 600px;
    -webkit-background-size:1903px 600px;
    -moz-background-size:1903px 600px;
}

.app-header
.app-direct-img
.direct-a{
    width:170px;
    height:80px;
    cursor: pointer;
}

.app-direct-img
li{
    float:left;
    margin-right:0.6em;
}

.app-header
.app-direct-img
.direct-b{
    width:170px;
    height:80px;    
    cursor: pointer;    
}

.app-header
.container{
    height:80px;
    width:730px;
    margin:0 auto;
    position:relative;
    top:460px;
} 
 
.app-center-img-first{
    position:relative; 
    width:100%;
    height:510px;
    border-bottom: 1px solid #e8e8e8;
    transform: translate3d(0, 50px, 0);
    -ms-transform:translate3d(0, 50px, 0);
    -moz-transform:translate3d(0, 50px, 0);
    -webkit-transform:translate3d(0, 50px, 0);
    -o-transform:translate3d(0, 50px, 0);
    transition: all 2s;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    -o-transition: all 2s;
}

.middle-clumns{
    display: table;
    max-width:1150px;
    table-layout: fixed;
    margin-left: auto;
    margin-right: auto;
    height:100%;
}

.app-center-img-first
.center-img-des{     
    vertical-align: middle;
    width:50%;
    padding-left:40px;      
    display: table-cell;
    float: none;
    text-align: left; 
}

.app-center-img-first
.center-img-text{     
    width: 50%;     
    padding-right: 20px;
    display: table-cell;
    vertical-align: middle;
    float: none;
    text-align: left;
    transform: translate3d(0, 35px, 0);
    -ms-transform:translate3d(0, 35px, 0);
    -moz-transform:translate3d(0, 35px, 0);
    -webkit-transform:translate3d(0, 35px, 0);
    -o-transform:translate3d(0, 35px, 0);
    transition: all 2s  ease;
    -moz-transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -o-transition: all 2s ease;
}

 .visible
 .center-img-text{
    transform:none;
    -ms-transform:none;
    -moz-transform:none;
    -webkit-transform:none;
    -o-transform:none;
 }

.visible
.center-img-text
h1{
    padding-bottom: 0; 
    transform:none;
    -ms-transform:none;
    -moz-transform:none;
    -webkit-transform:none;
    -o-transform:none;   
}

.center-img-text
h1{
    font-size:30px;
    color:black;
    font-weight: 300;
    padding-bottom: 15px;
    transition: padding-bottom 2s ease;
    -moz-transition: padding-bottom 2s ease;
    -webkit-transition: padding-bottom 2s ease;
    -o-transition: padding-bottom 2s ease;
}

.center-img-text
p{
    margin-top:12px;
    line-height:28px;
    color:#737172;   
    font-size: 16px;
}

.app-center-img-second{
    height:870px;
    border-bottom: 1px solid #e8e8e8;
    transform: translate3d(0, 50px, 0);
    -ms-transform:translate3d(0, 50px, 0);
    -moz-transform:translate3d(0, 50px, 0);
    -webkit-transform:translate3d(0, 50px, 0);
    -o-transform:translate3d(0, 50px, 0);
    transition: all 2s;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    -o-transition: all 2s;
}

.app-center-img-second
.container{
    display: table;
    max-width:1350px;
    table-layout: fixed;
    margin-left: auto;
    margin-right: auto;
    height:100%;
}

.app-center-img-second
.center-clumns-img{
    display: table-cell;
    vertical-align: middle;
    width:50%;
    float: none;
    padding-left:50px;    
    text-align: left;
}

.app-center-img-second
.center-img-text{
    display: table-cell;
    vertical-align: middle;
    width:50%;     
    padding-left: 65px;
    float: none;
    text-align: left;
    transform: translate3d(0, 35px, 0);
    -ms-transform:translate3d(0, 35px, 0);
    -moz-transform:translate3d(0, 35px, 0);
    -webkit-transform:translate3d(0, 35px, 0);
    -o-transform:translate3d(0, 35px, 0);
    transition: all 2s  ease;
    -moz-transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -o-transition: all 2s ease;
}

 .visible
 .container
 .center-img-text{
    transform:none;
    -ms-transform:none;
    -moz-transform:none;
    -webkit-transform:none;
    -o-transform:none;
 }

.app-footer{
    height:auto;
    text-align: center;    
}

.footer-img-text
h1{
    font-size:28px;
    color:black;
    font-weight: 300;
    -ms-transform:scale(0.5, 0.5);
    -moz-transform:scale(0.5, 0.5);
    -webkit-transform:scale(0.5, 0.5);
    -o-transform:scale(0.5, 0.5);
    transition: all 2s 0.6s;
    -moz-transition: all 2s 0.6s;
    -webkit-transition: all 2s 0.6s;
    -o-transition: all 2s 0.6s;
    opacity: 0;
    filter:alpha(opacity=0);
}

.app-footer
.footer-img-text{
    margin:0 auto;
    margin-top:75px;    
}

.app-footer
.download{
    width:730px;
    margin:50px auto;
}

.app-footer
.download
li:nth-child(1){
    float:left;
    margin-right:22px;
    transform: translate3d(0, 50px, 0);
    -ms-transform:translate3d(0, 50px, 0);
    -moz-transform:translate3d(0, 50px, 0);
    -webkit-transform:translate3d(0, 50px, 0);
    -o-transform:translate3d(0, 50px, 0);
    transition: all 2s;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    -o-transition: all 2s;
    opacity: 0;
    filter:alpha(opacity=0);
}

.app-footer
.download
li:nth-child(2){
    float:left;
    margin-right:22px;
    transform: translate3d(0, 50px, 0);
    -ms-transform:translate3d(0, 50px, 0);
    -moz-transform:translate3d(0, 50px, 0);
    -webkit-transform:translate3d(0, 50px, 0);
    -o-transform:translate3d(0, 50px, 0);
    transition: all 2s 0.5s;
    -moz-transition: all 2s 0.5s;
    -webkit-transition: all 2s 0.5s;
    -o-transition: all 2s 0.5s;
    opacity: 0;
    filter:alpha(opacity=0);
}

.app-footer
.download
li:nth-child(3){
    float:left;
    margin-right:22px;
    transform: translate3d(0, 50px, 0);
    -ms-transform:translate3d(0, 50px, 0);
    -moz-transform:translate3d(0, 50px, 0);
    -webkit-transform:translate3d(0, 50px, 0);
    -o-transform:translate3d(0, 50px, 0);
    transition: all 2s 1s;
    -moz-transition: all 2s 1s;
    -webkit-transition: all 2s 1s;
    -o-transition: all 2s 1s;
    opacity: 0;
    filter:alpha(opacity=0);
}


.download
.img-a-a{   
    width:220px;
    height:200px;
    background: url(./../images/app/矢量智能对象_50.png) no-repeat center center;
    background-size: 200px;
    -moz-background-size:200px;
}

.download
.img-a{   
    width:220px;
    height:200px;
    background: url(./../images/app/矢量智能对象_50.png) no-repeat center center;
    background-size: 200px;    
    -moz-background-size:200px;
}

.download
.img-b{    
    width:220px;
    height:200px;
    background: url(./../images/app/矢量智能对象_86.png) no-repeat center center;
     background-size: 200px;    
    -moz-background-size:200px;
}

.download
.img-c{    
    width:220px;
    height:200px;
    background: url(./../images/app/矢量智能对象_22.png) no-repeat center center;
     background-size: 200px;  
    -moz-background-size:200px;
}

div.visible{
    transform:none;
    -ms-transform:none;
    -moz-transform:none;
    -webkit-transform:none;
    -o-transform:none;
}

div.visible{
     transform:none;
    -ms-transform:none;
    -moz-transform:none;
    -webkit-transform:none;
    -o-transform:none;
}

 .visible
.download
li:nth-child(1){
    transform:none;
    -ms-transform:none;
    -moz-transform:none;
    -webkit-transform:none;
    -o-transform:none;
    opacity: 1;
    filter:alpha(opacity=100);
}
 
 .visible
.download
li:nth-child(2){
    transform:none;
    -ms-transform:none;
    -moz-transform:none;
    -webkit-transform:none;
    -o-transform:none;
    opacity: 1;
    filter:alpha(opacity=100);
}

 .visible .download li:nth-child(3){
    transform:none;
    -ms-transform:none;
    -moz-transform:none;
    -webkit-transform:none;
    -o-transform:none;
    opacity: 1;
    filter:alpha(opacity=100);
}

 .visible
 .footer-img-text
 h1{
    transform:none;
    -ms-transform:none;
    -moz-transform:none;
    -webkit-transform:none;
    -o-transform:none;
    opacity: 1;
    filter:alpha(opacity=100);
 }

.download
a{
    display:block;
    width:220px;
    height:200px;
}